import React, { Suspense } from 'react'
// 一般都是在根组件中配置前端路由规则. 因为Route组件在哪里使用,则Route组件中配置的页面组件就渲染在哪里
import { Routes, Route, Link, useRoutes, NavLink } from 'react-router-dom'
// 引入路由表
import routes from './routes'
export default function App() {
  return (
    <div id="app">
      <NavLink
        to="/home"
        // className={({ isActive }) => {
        //   return isActive ? 'sel' : ''
        // }}
        style={({ isActive }) => {
          return isActive ? { color: 'blue', fontSize: 30 } : {}
        }}
        end
      >
        首页
      </NavLink>
      <NavLink
        to="/login"
        // className={({ isActive }) => {
        //   return isActive ? 'sel' : ''
        // }}
        style={({ isActive }) => {
          return isActive ? { color: 'blue', fontSize: 30 } : {}
        }}
      >
        登录
      </NavLink>

      <hr />
      {/* 利用useRoutes根据路由表动态创建Routes和Route */}
      {useRoutes(routes)}
      
      <hr />
    </div>
  )
}
